<#assign module="driver"/>

<@override name="header">
<link rel="stylesheet" href="${ctx}/assets/css/datetimepicker.css">
</@override>
<@override name="body">

	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					服务人员:${driver.realname}（工号： ${driver.username}），帐号余额：<font <#if (driver.virtual>0)>style="color:#ff950b;font-weight:700;"<#elseif (driver.virtual<0)>style="color:red;font-weight:700;"</#if>>${driver.virtual}</font>，消费及充值历史清单
			    </div>
			    <div class="panel-body">
    				<form class="form-inline" id="SearchForm" method="get">
					    <div class="form-group">
			                <input class="form-control" id="startTime" name="startTime" placeholder="开始时间" readonly="readonly" type="text" value="${start?string('yyyy-MM-dd')}">
			            </div>
			            <div class="form-group">
			                <input class="form-control" id="endTime" name="endTime" placeholder="结束时间" readonly="readonly" type="text" value="${end?string('yyyy-MM-dd')}">
			            </div>
			            <div class="form-group">
			                <input type="submit" class="btn btn-default" value="查询">
			            </div>
			            <div class="form-group">
			            	<button type="button" class="pull-right btn btn-primary" onclick="window.location='${ctx}/driver/inandoutExport/${driver.id}';"><i class="glyphicon glyphicon-save"></i>&nbsp;导出记录</button>
						</div>
					</form>
        		</div>
			</div>
		</div>
	</div>
	
	
	<div class="row margin-top">
		<div class="col-xs-12">
		<div class="panel panel-primary">
		<div class="table-responsive">
			<table class="table table-hover table-striped">
				<thead>
				<tr>
					<th>时间</th>
					<th>金额(元)</th>
					<th>操作后余额(元)</th>
					<th>类型</th>
					<th>操作人</th>
					<th>备注</th>
				</tr>
				</thead>
				<tbody>
					<#if (page.content)?? >
				  	<#list page.content as data>
						<tr>
							<td>${data.happend?string("yyyy-MM-dd HH:mm:ss")}</td>
							<td><span style="color:#ff950b;font-weight:700;">${data.money?if_exists}</span></td>
							<td><span style="color:#ff950b;font-weight:700;">${data.afterMoney?if_exists}</span></td>
							<td>
								${data.recordTypeStr?if_exists}
							</td>
							<td>${data.operating?if_exists}</td>
							<td style="max-width:450px;">${data.memo?if_exists}</td>
						</tr>
					</#list>
					</#if>
				</tbody>
			</table>
			<#if page.totalElements??>
			<ul class="pagination pull-right pagination-sm">
				<li><a>共 ${page.totalElements} 条数据</a></li>
				<@pg.pager items=page.totalElements?number maxPageItems=20 export="currentPageNumber=pageNumber" url="${ctx}/driver/inandout/${driver.id}">
					<@pg.param name="startTime" value="${start?string('yyyy-MM-dd')}"/>
					<@pg.param name="endTime" value="${end?string('yyyy-MM-dd')}"/>
					<@pg.index>
						<@pg.first>
							<li><a href="${pageUrl}">&laquo;</a></li>
						</@pg.first>
						<@pg.prev>
							<li><a href="${pageUrl}">&lsaquo;</a></li>
						</@pg.prev>
						<@pg.pages>
							<#if  currentPageNumber == pageNumber >
								<li class="active"><a href="#">${pageNumber}</a></li>
							<#else>
								<li><a href="${pageUrl}">${pageNumber}</a></li>
							</#if>
						</@pg.pages>
						<@pg.next>
							<li><a href="${pageUrl}">&rsaquo;</a></li>
						</@pg.next>
						<@pg.last>
							<li><a href="${pageUrl}">&raquo;</a></li>
						</@pg.last>
					</@pg.index>
				</@pg.pager>
			</ul>
			</#if>
		</div>
		</div>
		</div>
	</div>
	
	<div class="text-center">
		<input type="button" class="btn btn-default back" value="返回" onclick="window.location.href = '${ctx}/driver/list';">
    </div>
</@override>
<@override name="footer">
<script src="${ctx}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="${ctx}/assets/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#startTime").datetimepicker({ format: 'yyyy-mm-dd', language: 'zh-CN', minView: 'month', pickDate: true, pickTime: false, inputMask: false, autoclose: true });
		$("#endTime").datetimepicker({ format: 'yyyy-mm-dd', language: 'zh-CN', minView: 'month', pickDate: true, pickTime: false, inputMask: false, autoclose: true });
		
		$('#endTime').change(function(){
			var begin=new Date($('#startTime').val().replace(/-/g,"/"));
			var end=new Date($('#endTime').val().replace(/-/g,"/"));
			if(begin!=null&&end!=null&&begin-end>=0){
				$('#endTime').val("");
				$.scojs_message("截止日期要在开始日期之后!", $.scojs_message.TYPE_ERROR);
			}
		});
		
		$('#startTime').change(function(){
			var begin=new Date($('#startTime').val().replace(/-/g,"/"));
		 	var end=new Date($('#endTime').val().replace(/-/g,"/"));
		 	if(begin!=null&&end!=null&&begin-end>=0){
		 		$('#endTime').val("");
		 		$.scojs_message("开始日期要在截止日期之前!", $.scojs_message.TYPE_ERROR);
	 		}
		});
	});
</script>
</@override>
<@extends name="../layout.ftl"/>